{% extends 'bootstrap/base.html' %}

{% block title %}
    {% if title %}
        {{ title }} - {{ _('微博') }}
    {% else %}
        {{ _('微博') }}
    {% endif %}
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{ url_for('main.index') }}">{{ _('微博') }}</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{{ url_for('main.index') }}">{{ _('首页') }}</a></li>
                    <li><a href="{{ url_for('main.explore') }}">{{ _('发现') }}</a></li>
                </ul>
                {% if g.search_form %}
                    <form class="navbar-form navbar-left" method="get"
                          action="{{ url_for('main.search') }}">
                        <div class="form-group">
                            {{ g.search_form.q(size=20, class='form-control', placeholder=g.search_form.q.label.text) }}
                        </div>
                    </form>
                {% endif %}
                <ul class="nav navbar-nav navbar-right">
                    {% if current_user.is_anonymous %}
                        <li><a href="{{ url_for('auth.login') }}">{{ _('登录') }}</a></li>
                    {% else %}
                        <li>
                            <a href="{{ url_for('main.messages') }}">
                                {{ _('私信') }}
                                {% set new_messages = current_user.new_messages() %}
                                <span id="message_count" class="badge"
                                      style="visibility: {% if new_messages %}visible
                                                         {% else %}hidden {% endif %};">
                                    {{ new_messages }}
                                </span>
                            </a>
                        </li>
                        <li><a href="{{ url_for('main.user_info', username=current_user.username) }}">{{ _('个人资料') }}</a></li>
                        <li><a href="{{ url_for('auth.logout') }}">{{ _('退出') }}</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
{% endblock %}

{% block content %}
    <div class="container">
        {% if current_user.is_authenticated %}
            {% with tasks = current_user.get_tasks_in_progress()  %}
                {% if tasks %}
                    {% for task in tasks %}
                        <div class="alert alert-success" role="alert">
                            {{ task.description }}
                            <span id="{{ task.id }}-progress">{{ task.get_progress() }}</span>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        {% endif %}
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-info" role="alert">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {# 其他页面内容均填充至此块中 #}
        {% block app_content %}{% endblock %}
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    {{ moment.include_moment() }}
    {{ moment.lang(g.locale) }}
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script>
        $(function(){
            let timer = null;
            let xhr = null;
            $('.user_popup').hover(
                function(event) {
                    // 获取span元素
                    const elem = $(event.currentTarget);
                    // 创建定时器
                    timer = setTimeout(function() {
                        timer=null;
                        // 通讯后台，获取弹窗展示页面
                        xhr = $.ajax(
                            `/info/${elem.first().text().trim()}/popup`).done(
                                function(data){
                                    xhr = null;
                                    // 创建弹窗对象并展示
                                    elem.popover({
                                        trigger: 'manual',
                                        html: true,
                                        animation: false,
                                        container: elem,
                                        content: data
                                    }).popover('show');
                                    // 渲染通过Ajax添加新的Flask-Moment元素
                                    flask_moment_render_all();
                                }
                        );
                    }, 1000);
                },
                function(event) {
                    const elem = $(event.currentTarget);
                    if (timer) {
                        clearTimeout(timer);
                        timer=null;
                    } else if (xhr) {
                        xhr.abort();
                        xhr = null;
                    } else {
                        elem.popover('destroy');
                    }
                }
            )
        });
        function set_message_count(n) {
            $('#message_count').text(n);
            $('#message_count').css('visibility', n ? 'visible': 'hidden');
        }
        function set_task_progress(task_id, progress) {
            $(`#${task_id}-progress`).text(progress);
        }
        {% if current_user.is_authenticated %}
        $(function () {
            let since = 0;
            // 定期调用回调函数，每10秒轮询一次
            setInterval(function () {
                $.ajax('{{ url_for('main.notifications') }}?since='+since).done(
                    function (notifications) {
                        for (let i = 0; i < notifications.length; i++) {
                            switch (notifications[i].name) {
                                case 'unread_message_count':
                                    // 根据名为unread_message_count的通知，更新消息计数徽标
                                    set_message_count(notifications[i].data);
                                    break;
                                case 'task_progress':
                                    set_task_progress(
                                        notifications[i].data.task_id,
                                        notifications[i].data.progress);
                                    break;
                            }
                            // 根据最后获取时间，限制只处理新的通知信息
                            since = notifications[i].timestamp;
                        }
                    }
                );
            }, 10000);
        });
        {% endif %}

        L2Dwidget.init({
            "model": {
                // jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-gf@1.0.5/assets/gf.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-nietzsche@1.0.5/assets/nietzsche.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json",
                jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",
                // jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
                "scale": 1
            },
            "display": {
                "position": "right",
                "width": 112.5,
                "height": 225,
                "hOffset": 200,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.7,
                "opacityOnHover": 0.2
            }
        });
    </script>
{% endblock %}
